<template>
  <div class="flight">
    <!-- 搜索框 -->
    <div class="search">
      <el-row>
        <el-form
          label-width="70px"
          :model="formData"
          :rules="rules"
          ref="form"
          @submit.prevent
        >
          <el-row>
            <el-form-item label="关键字">
              <el-radio-group v-model="radioLabel">
                <el-radio label="航班号"></el-radio>
                <el-radio label="起飞日期"></el-radio>
                <el-radio label="状态"></el-radio>
                <el-radio label="出发城市"></el-radio>
                <el-radio label="到达城市"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-row>
          <el-row>
            <el-col :span="15">
              <el-form-item :label="radioLabel">
                <el-input v-model="keyWord" @keyup.enter="search"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-button id="search" @click="search">搜&nbsp;索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-row>
    </div>
    <div>
      <!-- 列表 -->
      <el-table
        :data="tableData"
        style="width: 100%"
        height="250"
        row-key="userId"
        lazy
      >
        <el-table-column label="航班号" width="120">
          <template #default="scope">
            <span style="margin-left: -5px">{{ scope.row.flightId }}</span>
          </template>
        </el-table-column>
        <el-table-column label="起飞日期" width="120">
          <template #default="scope">
            <span style="margin-left: -5px">{{
              scope.row.departureDate.toLocaleDateString()
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="80">
          <template #default="scope">
            <span style="margin-left: -5px">{{ scope.row.status }}</span>
          </template>
        </el-table-column>
        <el-table-column label="出发城市" width="120">
          <template #default="scope">
            <span style="margin-left: -5px">{{ scope.row.departureCity }}</span>
          </template>
        </el-table-column>
        <el-table-column label="出发机场" width="150">
          <template #default="scope">
            <span style="margin-left: -5px">{{
              scope.row.departureAirport
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="到达城市" width="120">
          <template #default="scope">
            <span style="margin-left: -5px">{{ scope.row.arrivalCity }}</span>
          </template>
        </el-table-column>
        <el-table-column label="到达机场" width="150">
          <template #default="scope">
            <span style="margin-left: -5px">{{
              scope.row.arrivalAirport
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="机型" width="120">
          <template #default="scope">
            <span style="margin-left: -5px">{{ scope.row.planeModel }}</span>
          </template>
        </el-table-column>
        <el-table-column label="行李额" width="80">
          <template #default="scope">
            <span style="margin-left: -5px">{{
              scope.row.baggageAllowance
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="预计出发时间" width="120">
          <template #default="scope">
            <span style="margin-left: -5px">{{
              getTime(scope.row.departureTime)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="实际出发时间" width="120">
          <template #default="scope">
            <span style="margin-left: -5px">{{
              getTime(scope.row.actualDepartureTime)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="预计到达时间" width="120">
          <template #default="scope">
            <span style="margin-left: -5px">{{
              getTime(scope.row.arrivalTime)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="实际到达时间" width="120">
          <template #default="scope">
            <span style="margin-left: -5px">{{
              getTime(scope.row.actualArrivalTime)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="出发航站楼" width="120">
          <template #default="scope">
            <span style="margin-left: -5px">{{
              scope.row.departureTerminal
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="出发登机口" width="120">
          <template #default="scope">
            <span style="margin-left: -5px">{{ scope.row.departureGate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="到达航站楼" width="120">
          <template #default="scope">
            <span style="margin-left: -5px">{{
              scope.row.arrivalTerminal
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="到达行李口" width="120">
          <template #default="scope">
            <span style="margin-left: -5px">{{
              scope.row.arrivalCarouse
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="持续时长" width="90">
          <template #default="scope">
            <span style="margin-left: -5px">{{ scope.row.duration }}</span>
          </template>
        </el-table-column>
        <el-table-column label="准点率" width="80">
          <template #default="scope">
            <span style="margin-left: -5px">{{
              scope.row.punctualityRate + '%'
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="经济舱价格" width="120">
          <template #default="scope">
            <span style="margin-left: -5px">{{
              '¥' + scope.row.economyPrice
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="经济舱余票" width="120">
          <template #default="scope">
            <span style="margin-left: -5px">{{
              scope.row.economyNum + '张'
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商务舱价格" width="120">
          <template #default="scope">
            <span style="margin-left: -5px">{{
              '¥' + scope.row.businessPrice
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商务舱余票" width="120">
          <template #default="scope">
            <span style="margin-left: -5px">{{
              scope.row.businessNum + '张'
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="头等舱价格" width="120">
          <template #default="scope">
            <span style="margin-left: -5px">{{
              '¥' + scope.row.firstPrice
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="头等舱余票" width="120">
          <template #default="scope">
            <span style="margin-left: -5px">{{
              scope.row.firstNum + '张'
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="150">
          <template #default="scope">
            <div>
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 填写信息框 -->
      <el-dialog title="航班信息" v-model="showDialog">
        <el-form :model="formData">
          <el-row>
            <el-form-item label="航班号" :label-width="formLabelWidth">
              <el-input
                v-model="formData.flightId"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="机型" :label-width="formLabelWidth">
              <el-input
                v-model="formData.planeModel"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="行李额" :label-width="formLabelWidth">
              <el-input
                v-model="formData.baggageAllowance"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="出发日期" :label-width="formLabelWidth">
              <el-date-picker v-model="formData.departureDate"></el-date-picker>
            </el-form-item>
            <el-form-item label="出发时间" :label-width="formLabelWidth">
              <el-time-picker v-model="formData.departureTime"></el-time-picker>
            </el-form-item>
            <el-form-item label="实际出发时间" :label-width="formLabelWidth">
              <el-time-picker
                v-model="formData.actualDepartureTime"
              ></el-time-picker>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="到达日期" :label-width="formLabelWidth">
              <el-date-picker v-model="formData.arrivalDate"></el-date-picker>
            </el-form-item>
            <el-form-item label="到达时间" :label-width="formLabelWidth">
              <el-time-picker v-model="formData.arrivalTime"></el-time-picker>
            </el-form-item>
            <el-form-item label="实际到达时间" :label-width="formLabelWidth">
              <el-time-picker
                v-model="formData.actualArrivalTime"
              ></el-time-picker>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="出发城市" :label-width="formLabelWidth">
              <el-input
                v-model="formData.departureCity"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="到达城市" :label-width="formLabelWidth">
              <el-input
                v-model="formData.arrivalCity"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态" :label-width="formLabelWidth">
              <el-input v-model="formData.status" autocomplete="off"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="出发机场" :label-width="formLabelWidth">
              <el-input
                v-model="formData.departureAirport"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="出发航站楼" :label-width="formLabelWidth">
              <el-input
                v-model="formData.departureTerminal"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="出发登机口" :label-width="formLabelWidth">
              <el-input
                v-model="formData.departureGate"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="到达机场" :label-width="formLabelWidth">
              <el-input
                v-model="formData.arrivalAirport"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="到达航站楼" :label-width="formLabelWidth">
              <el-input
                v-model="formData.arrivalTerminal"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="到达行李口" :label-width="formLabelWidth">
              <el-input
                v-model="formData.arrivalCarouse"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="经济舱价格" :label-width="formLabelWidth">
              <el-input
                v-model="formData.economyPrice"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="商务舱价格" :label-width="formLabelWidth">
              <el-input
                v-model="formData.businessPrice"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="头等舱价格" :label-width="formLabelWidth">
              <el-input
                v-model="formData.firstPrice"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="经济舱余票" :label-width="formLabelWidth">
              <el-input
                v-model="formData.economyNum"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="商务舱余票" :label-width="formLabelWidth">
              <el-input
                v-model="formData.businessNum"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="头等舱余票" :label-width="formLabelWidth">
              <el-input
                v-model="formData.firstNum"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item id="btn">
              <el-button @click="cancelForm">取 消</el-button>
              <el-button type="primary" @click="confirmForm(formData.index)">
                确 定
              </el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { defineComponent, getCurrentInstance, ref } from 'vue';

export default defineComponent({
  name: 'Flight',
  components: {},
  setup(propst) {
    const getTime = (date) => {
      return (
        date.getHours() +
        ':' +
        (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes())
      );
    };
    const radioLabel = ref('航班号');
    const keyWord = ref('');
    const search = () => {
      if (keyWord.value === '') {
        tableData.value = originData.value;
        return;
      }
      tableData.value = originData.value.filter((currentValue) => {
        let label;
        switch (radioLabel.value) {
          case '航班号':
            label = 'flightId';
            break;
          case '起飞日期':
            label = 'departureDate';
            break;
          case '状态':
            label = 'status';
            break;
          case '出发城市':
            label = 'departureCity';
            break;
          case '到达城市':
            label = 'arrivalCity';
            break;
          default:
            label = '';
        }
        return currentValue[label].match(keyWord.value);
      });
    };
    const originData = ref([
      {
        flightId: 'MU123',
        planeModel: '波音747',
        baggageAllowance: '20',

        status: '未起飞',
        departureDate: new Date(),
        departureTime: new Date(),
        actualDepartureTime: new Date(),
        departureCity: '北京',
        departureAirport: '北京大兴机场',
        departureTerminal: 'A21',
        departureGate: '8',
        arrivalDate: new Date(),
        arrivalTime: new Date(),
        actualArrivalTime: new Date(),
        arrivalCity: '上海',
        arrivalAirport: '上海虹桥机场',
        arrivalTerminal: 'B12',
        arrivalCarouse: '47',
        duration: '3h20min',
        punctualityRate: 99,

        constructionCost: 300,
        economyPrice: 400,
        economyNum: 13,
        businessPrice: 700,
        businessNum: 4,
        firstPrice: 1200,
        firstNum: 2,
      },
    ]);
    const tableData = ref(originData.value);
    const formData = ref({
      index: '',
      flightId: '',
      planeModel: '',
      baggageAllowance: '',
      status: '',

      departureDate: new Date(),
      departureTime: new Date(),
      actualDepartureTime: new Date(),
      departureAirport: '',
      departureCity: '',
      departureTerminal: '',
      departureGate: '',
      arrivalDate: new Date(),
      arrivalTime: new Date(),
      actualArrivalTime: new Date(),
      arrivalAirport: '',
      arrivalCity: '',
      arrivalTerminal: '',
      arrivalCarouse: '',
      duration: '',
      punctualityRate: 0,

      constructionCost: 0,
      economyPrice: 0,
      economyNum: 0,
      businessPrice: 0,
      businessNum: 0,
      firstPrice: 0,
      firstNum: 0,
    });
    const showDialog = ref(false);
    const handleEdit = (index, row) => {
      Object.keys(formData.value).forEach((key) => {
        formData.value[key] = tableData.value[index][key];
      });
      formData.value.index = index;
      showDialog.value = true;
    };
    const handleDelete = (index, row) => {
      //向后端数据传输接口
      tableData.value.splice(index, 1);
    };
    const confirmForm = (index) => {
      console.log('index: ', index);
      showDialog.value = false;
      Object.keys(tableData.value[index]).forEach((key) => {
        tableData.value[index][key] = formData.value[key];
        //向后端数据传输接口
      });
    };
    const cancelForm = () => {
      showDialog.value = false;
    };

    return {
      getTime,
      radioLabel,
      keyWord,
      search,
      originData,
      tableData,
      formData,
      handleEdit,
      handleDelete,
      showDialog,
      // addItem,
      // editRow,
      // closeDialog,
      confirmForm,
      cancelForm,
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/assets/css/config.scss';

.el-row {
  margin-left: 5px;
}
//多选框

:deep(.el-table) {
  border-radius: 20px;
  // padding: 10px;
  padding-left: 10px;
  height: 469px !important;
}
.search {
  border-radius: 20px;
  padding: 10px;
  background-color: #fff;
  /* width: 500px; */
  height: 110px;
  /* margin: 0 auto; */
  margin-bottom: 20px;
  #search {
    width: 85px;
  }
}
:deep(.el-input__inner) {
  width: 300px;
}
:deep(.el-dialog) {
  margin-top: 20px !important;
  text-align: center;
  width: 1100px !important;
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: auto;
  }
  .el-input__inner {
    width: 255px !important;
  }
  .el-form {
    margin-top: -20px;
    // margin-left: -10px;
    .el-row {
      // margin: 20px auto;
      .el-form-item {
        margin: 0 auto;
        &#radio {
          padding-left: 5px;
        }
        &#btn {
          margin-top: 20px;
          padding-left: -10px;
          .el-button {
            margin: 0 40px;
            width: 150px;
          }
        }
      }
    }
  }
}
</style>
